<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生成绩管理系统</title>
    <script>
        function refresh(){
            xhttp.onreadystatechange = function (){
                if (this.readyState == 4 && this.status == 200) {
                    procQueryResponse(this.responseText);
                }
            };
            xhttp.open("GET","/grades",true);
            xhttp.setRequestHeader('Accept','application/json');
            xhttp.send();
        }

        function procQueryResponse(responseText){
            const obj = JSON.parse(responseText);
            if (obj.success){
                const tblBody= document.getElementById('grades');
                tblBody.innerHTML = '';
                for (let grade of obj.data){
                    const tr = document.createElement('tr');
                    const td = document.createElement('td');
                    td.innerText = grade.studentId;
                    const td2 = document.createElement('td');
                    td2.innerText = grade.courseId;
                    const td3 = document.createElement('td');
                    td3.innerText = grade.time;
                    const td4 = document.createElement('td');
                    td4.innerText = grade.score;

                    const td5 = document.createElement('td');
                    const iptDel = document.createElement('input');
                    iptDel.type = 'button';
                    iptDel.value = '删除';
                    iptDel.addEventListener('click',function (){
                        onDelete(grade);
                        return false;
                    });
                    const iptUpdate = document.createElement('input');
                    iptUpdate.type = 'button';
                    iptUpdate.value = '修改';
                    iptUpdate.addEventListener('click',function (){
                        update(grade);
                        return false;
                    });
                    td5.appendChild(iptDel);
                    td5.appendChild(iptUpdate);

                    tr.appendChild(td);
                    tr.appendChild(td2);
                    tr.appendChild(td3);
                    tr.appendChild(td4);
                    tr.appendChild(td5);
                    tblBody.appendChild(tr);
                }
            }
        }

        function onDelete(grade){
            console.log('删除中...');
            console.log(grade);
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    const obj = JSON.parse(this.responseText);
                    console.log(obj);
                    if (obj.success) {
                        alert('删除成功！');
                        refresh();
                    }else{
                        alert('删除失败！');
                    }
                }
            }
            xhttp.open("POST","/grade/delete?studentId=" + grade.studentId, true);
            xhttp.setRequestHeader('Accept','application/json');
            xhttp.send();
        }

        function add(){
            const iptStudentId = document.getElementById('iptStudentId');
            const iptCourseId = document.getElementById('iptCourseId');
            const iptTime = document.getElementById('iptTime');
            const iptScore = document.getElementById('iptScore');
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    const obj = JSON.parse(this.responseText);
                    console.log(obj);
                    if (obj.success) {
                        alert('添加成功！');
                        refresh();
                    }else{
                        alert('添加失败！');
                    }
                }
            }
            xhttp.open("POST","/grade/add?studentId=" + iptStudentId.value + '&courseId=' + iptCourseId.value + '&time=' + iptTime.value + '&score=' + iptScore.value ,true);
            xhttp.setRequestHeader('Accept','application/json');
            xhttp.send();
        }

        function update(grade){
            console.log('更新中...');
            const iptCourseId = document.getElementById('iptCourseId');
            const iptStudentId = document.getElementById('iptStudentId');
            const iptTime = document.getElementById('iptTime');
            const iptScore = document.getElementById('iptScore');
            iptStudentId.value = grade.studentId;
            iptCourseId.value = grade.courseId;
            iptTime.value = grade.time;
            iptScore.value = grade.score;
        }

        function onUpdate(){
            const iptCourseId = document.getElementById('iptCourseId');
            const iptTime = document.getElementById('iptTime');
            const iptStudentId = document.getElementById('iptStudentId');
            const iptScore = document.getElementById('iptScore');
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    const obj = JSON.parse(this.responseText);
                    console.log(obj);
                    if (obj.success) {
                        alert('修改成功！');
                        refresh();
                    }else{
                        alert('修改失败！');
                    }
                }
            }
            xhttp.open("PUT","/grade/update?courseId=" + iptCourseId.value + '&time=' + iptTime.value + '&studentId=' + iptStudentId.value + '&score=' + iptScore.value,true);
            xhttp.setRequestHeader('Accept','application/json');
            xhttp.send();

        }

        function getById(){
            const  iptStudentId  =document.getElementById('iptStudentId');
            xhttp.onreadystatechange = function (){
                if (this.readyState == 4 && this.status == 200) {
                    procQueryResponse(this.responseText);
                }
            };
            xhttp.open("GET","/grade?studentId" +
                "=" + iptStudentId.value,true);
            xhttp.setRequestHeader('Accept','application/json');
            xhttp.send();

        }

        var xhttp = new XMLHttpRequest();
        window.onload = function (){
            refresh();
        }
    </script>
    <style>
        div{
            display: inline-block;
        }
        .navbar-nav {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            padding-left: 0;
            margin-bottom: 0;
            list-style: none
        }
        .pr-3, .px-3 {
            padding-right: 1rem !important
        }
        .text-nowrap {
            white-space: nowrap !important
        }
        .nav-link {
            display: block;
            padding: .5rem 1rem;
            width: 10px;
            height: 10px;
            margin-left: 90%;
        }
        .nav-link.disabled {
            color: #6c757d
        }
        .navbar-nav .nav-link:hover {
            color: rgba(237, 194, 236, 1)
        }.navbar-nav .nav-link {
             padding-right: 0;
             padding-left: 0
         }
    </style>
</head>
<body>
<div>
    <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
        <ul class="navbar-nav px-3">
            <li class="nav-item text-nowrap">
                <a class="nav-link" href="dashboard.html">返回</a>
            </li>
        </ul>
        <ul class="navbar-nav px-3">
            <li class="nav-item text-nowrap">
                <a class="nav-link" href="login.html">退出</a>
            </li>
        </ul>
    </nav>
    <form>

        <table style="width: 100%";>
            <thead>
            <tr>
                <th>学生成绩管理</th>
            </tr>
            </thead>
        </table>

        <div>
            <label for="iptStudentId">学生学号</label>
            <input id="iptStudentId" type="text" placeholder="输入学生学号" name="studentId">
        </div>
        &nbsp;
        <div>
            <label for="iptCourseId">课程编号</label>
            <input id="iptCourseId" type="text" placeholder="输入课程编号" name="courseId">
        </div>
        &nbsp;
        <div>
            <label for="iptTime">考试时间</label>
            <input id="iptTime" type="text" placeholder="输入考试时间" name="time">
        </div>
        &nbsp;
        <div>
            <label for="iptScore">学生成绩</label>
            <input id="iptScore" type="text" placeholder="输入学生成绩" name="score">
        </div>
    </form>
    <input type="button" value="添加" onclick="add();">
    &nbsp;
    <input type="button" value="刷新" onclick="refresh()">
    &nbsp;
    <input type="button" value="查询" onclick="getById()">
    &nbsp;
    <input type="button" value="确认修改" onclick="onUpdate()">
    <table>
        <thead>
        <tr>
            <th>学生学号</th>
            <th>课程编号</th>
            <th>考试时间</th>
            <th>学生成绩</th>
        </tr>
        </thead>
        <tbody id="grades">
        </tbody>
    </table>
</div>
</body>
</html>
